<template>
  <div>
    <van-checkbox-group v-model="result" ref="checkboxGroup">
      <van-checkbox :name="item.id" v-for="item in cartList" @click="add(item)" label-disabled>
        <van-card :num="item.number" :price="item.market_price" :desc="item.goods_name" title="我的商品" :thumb="item.list_pic_url
        " :key="item.id" />
      </van-checkbox>
    </van-checkbox-group>
    <van-submit-bar :price="num" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked" label-disabled @click="quanxuan">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import Vue from 'vue';
import { Card } from 'vant';
import { cartnum, qxfx } from '@/api/cartnum';
import { Checkbox, CheckboxGroup } from 'vant';
import { SubmitBar } from 'vant';

Vue.use(SubmitBar);

Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Card);
export default {
  name: "",
  data() {
    return {
      cartList: [],
      result: [],
      checked: false,
      num: 0,
    };
  },
  created() {
    // 购物车的数据
    cartnum({}).then(res => {
      console.log(res);
      this.cartList = res.data.cartList
    })
    // console.log(1111111111, this.result.length);
  },
  methods: {
    onSubmit() { },
    //  计算num
    add(item) {
      // result里面如果包括creaLIST的话就累加价格 
      console.log(this.result, item);
      if (this.result.includes(item.id)) {
        this.num += item.number * item.market_price * 100;
      }
      else {
        this.num -= item.number * item.market_price * 100;
      }
      // 复选框全部等于false之后价格清零
      if (this.result.length == 0) {
        this.num = 0
      }
    },
    // 我的全选和反选的花花
    quanxuan() {
      // qxfx({
      //   isChecked: this.checked,
      //   productIds: this.result.length = this.cartList.length
      // }).then(res => {

      //   console.log('这个是我的qxfx的接口得返回来的数据', res);
      //   // if (this.result.length == this.cartList.length) {
      //   //   this.checked = true
      //   //   console.log(1111111111, this.result.length);
      //   //   console.log(222222222, this.cartList.length);
      //   // } else {
      //   //   this.checked = false
      //   // }
      //   if (this.checked == true) {
      //     this.result.length = this.cartList.length
      //     this.$refs.checkboxGroup.toggleAll(true);
      //   } else if (this.checked == false) {
      //     this.$refs.checkboxGroup.toggleAll(false);
      //     this.result.length = 0
      //   }
      // })
      if (this.checked == true) {
        // this.result.length = this.cartList.length
        this.num = 0

        this.$refs.checkboxGroup.toggleAll(true);
        this.cartList.map(
          (item) => (this.num += item.number * item.retail_price * 100)
        )
      } else if (this.checked == false) {

        this.$refs.checkboxGroup.toggleAll(false);
        this.num = 0
        // this.result.length = 0
      }
    }
  },
  watch: {
    result(oldvalue, newvalue) {
      // console.log(oldvalue);
      if (oldvalue.length == this.cartList.length) {
        // this.num = 0
        this.checked = true
      } else {
        // this.num = 0
        this.checked = false
      }
    }
  },
  // computed: {
  //   num: {
  //     get() {
  //       this.result.forEach(item => {
  //         this.cartList.forEach(item1 => {
  //           if (item == item1.id) {
  //             return this.num += item1.number * item1.market_price * 100
  //           }
  //         })
  //       })
  //     },
  //     set(val) {

  //     }

  //   }


  // }
};
</script>
<style lang="less" scoped>
// .van-checkbox {
//   width: 360px;
// }
.van-checkbox-group {
  width: 100%;

  .van-card {
    width: 360px;
  }
}
</style>